<template>
    <div class="login-wrap" :class="hostname === 'crm' ? 'login-wraps' : ''">
        <div class="ms-login">
            <div class="ms-title">{{ name }}CRM管理系统</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="请输入账号">
                        <template #prepend>
                            <el-button icon="el-icon-user-solid"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                         :type="passwordShow"
                        placeholder="请输入密码"
                        v-model="param.password"
                        @keyup.enter="submitForm()"
                    >
                        <template #prepend>
                            <el-button icon="el-icon-lock"></el-button>
                        </template>
                    </el-input>
                    <img v-if="seeEyeShow" class="seeEye" @click="seeEye()" src="../assets/img/eyes.png" alt="">
                    <img v-if="!seeEyeShow" class="seeEye" @click="seeEyes()" src="../assets/img/eye.png" alt="">
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                </div>
                <p class="login-tips">Tips : 用户名和密码随便填。</p>
            </el-form>
        </div>
    </div>
</template>

<script>
import {Encrypt} from '../utils/crypto'
export default {
    data() {
        return {
            passwordShow: "password",
            seeEyeShow: true,
            hostname: '',
            param: {
                username: "",
                password: "123456"
            },
            params: {
                username: "",
                password: "123456"
            },
            rules: {
                username: [
                    { required: true, message: "请输入账号", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ]
            },
            logoUrl: '',
            name: ''
        };
    },
    created() {
        this.$store.commit("clearTags");
        this.getLogoName()
    },
    mounted() {
        const hostUrl = window.location.hostname;
        const char = ".";
        const index = hostUrl.indexOf(char);
        this.hostname = hostUrl.slice(0, index);
    },
    methods: {
        seeEye(){
            this.seeEyeShow = false
            this.passwordShow =  "text"
        },
        seeEyes(){
            this.seeEyeShow = true
            this.passwordShow =  "password"
        },
        submitForm() {
            this.$refs.login.validate(valid => {
                if (valid) {
                    this.params.password = Encrypt(this.param.password);
                    this.params.username = this.param.username;
                    this.$http({
                        url: "/api/quick/consumer/doLogin",
                        method: "post",
                        headers: {
                        "Content-Type": "application/json",
                        },
                        data: this.params,
                    }).then((data) => {
                        if (data.code == 0) {
                            localStorage.setItem("linggong_token", data.result.access_token);
                            localStorage.setItem("linggong_info", JSON.stringify(data.result.consumerDto));
                            localStorage.setItem("businessNo", data.result.businessNo);
                            localStorage.setItem("businessId", JSON.stringify(data.result.businessId));
                            this.$message.success("登录成功");
                            localStorage.setItem("platformName", data.result.consumerDto.platformName);
                            localStorage.setItem("ms_username", this.param.username);
                            this.$router.push("/");
                            localStorage.setItem("menuItems", JSON.stringify(data.result.items));
                        }
                    });
                } else {
                    this.$message.error("请输入账号和密码");
                    return false;
                }
            });
        },
        getLogoName() {
            let hostname = window.location.hostname
            // console.log(hostname)
            this.logoUrl = require("../assets/img/LGlogo.png")
            if(hostname == "crm-test.iscqifuxinxi.com"){
                this.name = "浪潮无感发薪平台"
            }else if(hostname == "crm.iscqifuxinxi.com"){
                this.name = "浪潮灵工云"
            }else if(hostname == "platform-test.iscqifuxinxi.com"){
                this.name = "浪潮自然人发薪平台"
            }else if(hostname == "platform.iscqifuxinxi.com"){
                this.name = "浪潮灵工云"
            }
            // this.$http({
            //     url: "/api/quick/consumer/selectPlatformLogoAndName",
            //     method: "post",
            //     headers: {
            //     "Content-Type": "application/json",
            //     },
            // }).then((data) => {
            //     if (data.code == 0) {
            //         // this.logoUrl = data.result.logoUrl
            //         // this.name = data.result.name
            //     }
            // });
        }
    }
};
</script>

<style scoped>
.seeEye {
  position: absolute;
  width: 20px;
  right: 10px;
  top: 28px;
  cursor: pointer;
}
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../assets/img/login1.jpg) center;
    background-size: 100%;
}
.login-wraps {
    background: url(../assets/img/login.jpg) center;
    background-size: 100%;
}
.ms-title {
    width: 100%;
    line-height: 1;
    text-align: center;
    font-size: 24px;
    color: #326CF0;
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 390px;
    margin: -210px 0 0 100px;
    border-radius: 5px;
    overflow: hidden;
}
.ms-content {
    padding: 140px 0px 0 0;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 220px;
    height: 40px;
    margin-top: 100px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
    display: none;
}

</style>
<style>
.login-wrap .el-input__inner {
    border: 0;
    line-height: 70px;
    height: 70px;
    color: #B9C0C7;
}
.login-wrap .el-input-group__prepend {
    color: #B9C0C7;
    padding: 0 10px 0 0;
    background: none;
    border: 0;
    font-size: 20px;
}
.login-wrap .el-form-item {
    margin-bottom: 0;
    border-bottom: 1px solid #F8FAFC;
    line-height: 70px;
}
.el-form-item__error {
    z-index: 111;
}
</style>